<template>
  <div class="routeHeader">
    <div class="headerLeft" v-if="!props.isDetailRoute">
      <div class="title">
        {{ routeAllData.name }}
      </div>
      <div class="selectRoute">
        已选线路: <span class="numFont">{{ routeAllData.routeList.length }}</span> 条
      </div>
      <div class="link">
        <el-link type="primary" style="font-size: 16px;" @click="selectRoute">编辑控制台</el-link>
      </div>
      <div>
        总车数:<span class="numFont">{{ allCars }}</span>台
      </div>
      <div>
        运营车辆:<span class="numFont">{{ operationAllCars }}</span>台
      </div>
      <div>
        非运营车辆:<span class="numFont">{{ noOperationAllCars }}</span>台
      </div>
    </div>
    <div class="headerMergeLeft" v-else>
      <div class="jump">
        <div>线路选择</div>
        <!-- <el-link type="primary" @click="jumpRouteAll">全局模式</el-link> -->
      </div>
      <div class="routeSelect">
        <span class="direction" v-if="showArrows"> &lt; </span>
        <div class="routeSelect_content">
          <!-- <span v-for="item in routeAllData.routeList" :key="item.routeId" @click="checkDetail(item)">{{ item.routeName}}</span> -->
          <span>101路</span> <span>101路</span> <span>101路</span> <span>101路</span> <span>101路</span> <span>101路</span>
          <span>101路</span> <span>101路</span> <span>101路</span> 
        </div> 
        <span class="direction" v-if="showArrows">&gt;</span>
      </div>
    </div>
    <div class="headerRight">
      <el-button size="small" @click="switchShow(true)" :class="isCarNum ? 'headerRight_carNum' : ''">显示车牌</el-button>
      <el-button size="small" @click="switchShow(false)" :class="isCarNum ? '' : 'headerRight_carNum'">显示车号</el-button>
      <el-tooltip class="box-item" effect="light" placement="bottom-end">
        <template #content>
          <div class="carTooltip">
            <div class="statusItem" v-for="item in status" :key="item.color">
              <span class="statusColor" :style="{ backgroundColor: item.color }" />
              <span>{{ item.statusName }}</span>
            </div>
          </div>
        </template>
        <template #default>
          <el-link type="primary" style="font-size: 14px; margin: 0 30px 0 20px; height: 20px;">车辆状态图示</el-link>
        </template>
      </el-tooltip>
      <div style="font-size: 14px;line-height: 22px;">车辆定位:</div>
      <el-input placeholder="请输入车牌号或编号" class="carPosition_input"></el-input>
      <el-link style="font-size: 14px; margin: 0 0 0 30px; height: 20px; color: #fff;" @click="callBack">返回控制台</el-link>
      <img src="../assets/img/goBack.png" alt="">
    </div>
  </div>
</template>

<script setup>
import { computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter();

const props = defineProps({
  isDetailRoute: Boolean,
  routeAllData: Object
})

function checkDetail(item) {
  router.push({ path: 'smartDispatch/detail', query: { routeId: item.routeId } })
}

const allCars = computed(() => {
  let sum = 0
  props.routeAllData.routeList.forEach(item => {
    sum += item.vehicles
  })
  return sum
})

const operationAllCars = computed(() => {
  let sum = 0
  props.routeAllData.routeList.forEach(item => {
    sum += item.operationVehicles
  })
  return sum
})

const noOperationAllCars = computed(() => {
  let sum = 0
  props.routeAllData.routeList.forEach(item => {
    sum += item.nonOperationVehicles
  })
  return sum
})


const status = [
  {
    statusName: '正常',
    color: '#6fba2c'
  },
  {
    statusName: '报警',
    color: '#f23333'
  },
  {
    statusName: '串线',
    color: '#31cabc'
  },
  {
    statusName: '掉线',
    color: '#999999'
  }
]
const selectRoute = () => {
  console.log(1);
}

const jumpRouteAll = () => {
  router.push('/smartDispatch/routeAll')
}
const emit = defineEmits(['changeCarNum', 'changeRoute'])


const isCarNum = ref(false)
const switchShow = (boolean) => {
  isCarNum.value = boolean
  emit('changeCarNum', boolean)
}
const callBack = () => {
  router.push('/smartDispatch')
}


//页面切换功能

const showArrows = ref(false)
onMounted(() => {
  let node = document.querySelector('.routeSelect_content')

  let width = node.offsetWidth   //线路框的宽度
  console.log('这个是框节点', width);

  if (width > 600) {
    showArrows.value = true
  }
})



</script>

<style lang="scss" scoped>
.routeHeader {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0px 30px;
  height: 56px;
  color: #fff;
  background-color: #091940;

  .headerLeft {
    flex: 2;
    display: flex;
    align-items: center;
    justify-content: space-around;

    div {
      font: 14px;
    }

    .title {
      color: #fff;
      font-size: 22px;
    }
  }

  .headerMergeLeft {
    flex: 2;
    display: flex;
    align-items: center;

    .el-link {
      font-size: 16px;
    }

    .routeSelect {
      width: 800px;
      margin-left: 20px;
      background-color: rgb(43, 51, 51);
      display: flex;
      align-items: center;
      justify-content: space-between;

      .routeSelect_content {
        // width: 700px;
        background-color: #7493e2;
        overflow: hidden;
        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap;

        span {
          display: inline-block;
          background-color: rgb(139, 94, 34);
          // border: 1px solid #668FF5;
          font-size: 14px;
          padding: 0 14px;
          margin: 0 4px;
          // margin-left: 10px;
          cursor: pointer;
        }
      }




      .direction {
        border: none;
        color: #668FF5;
        padding: 0;
      }
    }
  }

  .headerRight {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex: 3;

    .el-button {
      width: 70px;
      height: 26px;
      line-height: 26px;
      text-align: center;
      border: 1px solid #668FF5;
      border-radius: 2px;
      color: #668FF5;
      background-color: #091940;
    }

    .headerRight_carNum {
      color: #fff;
      background-color: #668FF5;
    }

    .carPosition_input {
      width: 176px;
      height: 27px;

      :deep .el-input__wrapper {
        background-color: #091940;
        border: 1px solid #4E5A75;
        border-radius: 2px;
        box-shadow: none;
      }
    }
  }
}

.carTooltip {
  display: flex;
  padding: 10px;
  justify-content: space-around;

  .statusItem {
    width: 50px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 15px;

    .statusColor {
      display: inline-block;
      width: 12px;
      height: 12px;
      margin-right: 10px;
    }
  }
}
</style>